<template>
  <h4 style="color: black">新增病虫害发生记录</h4>
  <hr class="newhr" />
  <!-- NewFrom 抽屉里表单 -->
  <el-form
    :model="RuleFormData"
    ref="form"
    :rules="rules"
    label-width="120px"
    size="default"
    :props="{
      label: (data) => {
        console.log('data', data)
      }
    }"
  >
    <div class="flex">
      <el-form-item label="植物名称">
        <el-input v-model="RuleFormData.plantname" />
      </el-form-item>
      <el-form-item label="所属公园">
        <el-input v-model="RuleFormData.belongpark" />
      </el-form-item>
      <el-form-item label="科名">
        <el-input v-model="RuleFormData.familyname" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="属名">
        <el-input v-model="RuleFormData.naturename" />
      </el-form-item>
      <el-form-item label="胸径">
        <el-input v-model="RuleFormData.thoraxdength" />
      </el-form-item>
      <el-form-item label="蓬径">
        <el-input v-model="RuleFormData.toplength" />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="数量">
        <el-input v-model="RuleFormData.quantity" />
      </el-form-item>
      <el-form-item label="特征">
        <el-input v-model="RuleFormData.feature" />
      </el-form-item>
    </div>
    <el-form-item label="备注">
      <el-input v-model="RuleFormData.remark" type="textarea" />
    </el-form-item>
    <hr />
    <el-form-item el-form-item>
      <el-button type="success" @click="onsubmit" v-if="edata">修改</el-button>
      <el-button type="primary" @click="onsubmit" v-else>确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { FormRules } from 'element-plus'
import { onMounted } from 'vue'
import { BugRecordPost, BugRecordPut } from '@/api/ParkPlant/index'
import { ParkPlantType } from './types/ParkPlantMessage'

type CateType = Omit<ParkPlantType, 'children'>
const rules = reactive<FormRules<CateType>>({
  plantname: [{ required: true, message: '请输入植物名称', trigger: 'blur' }],
  belongpark: [{ required: true, message: '请输入所属公园', trigger: 'blur' }],
  familyname: [{ required: true, message: '请输入科名', trigger: 'blur' }],
  naturename: [{ required: true, message: '请输入属名', trigger: 'blur' }],
  thoraxdength: [{ required: true, message: '请输入胸径', trigger: 'blur' }],
  toplength: [{ required: true, message: '请输入蓬径', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  feature: [{ required: true, message: '请输入特征', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})

const emit = defineEmits()

const RuleFormData: ParkPlantType = reactive({
  plantname: '', //植物名称
  belongpark: '', //所属公园
  familyname: '', //科名
  naturename: '', //属名
  thoraxdength: '', //胸径
  toplength: '', //蓬径
  quantity: '', //数量
  feature: '', //特征
  remark: '' //备注
})

const onsubmit = () => {
  // BugRecordPost(RuleFormData).then((res) => {
  //   emit('update:table-data', {
  //     ...RuleFormData,
  //     objectId: res.data.objectId
  //   })
  //   console.log(res);
  // })
  /////
  if (props.edata) {
    // 修改
    let { objectId } = props.edata
    BugRecordPut(objectId, RuleFormData).then(() => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId
      })
    })
  } else {
    //新增
    BugRecordPost(RuleFormData).then((res) => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId: res.data.objectId
      })
    })
  }
}

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: ParkPlantType | null
}
const props = defineProps<PropsType>()
console.log('接收到了父级的props', props.edata)
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    let {
      plantname,
      belongpark,
      familyname,
      naturename,
      thoraxdength,
      toplength,
      quantity,
      feature,
      remark
    } = props.edata
    RuleFormData.plantname = plantname
    RuleFormData.belongpark = belongpark
    RuleFormData.familyname = familyname
    RuleFormData.naturename = naturename
    RuleFormData.thoraxdength = thoraxdength
    RuleFormData.toplength = toplength
    RuleFormData.quantity = quantity
    RuleFormData.feature = feature
    RuleFormData.remark = remark
  } else {
    //点击到了新增按钮
    RuleFormData.plantname = ''
    RuleFormData.belongpark = ''
    RuleFormData.familyname = ''
    RuleFormData.naturename = ''
    RuleFormData.thoraxdength = ''
    RuleFormData.toplength = ''
    RuleFormData.quantity = ''
    RuleFormData.feature = ''
    RuleFormData.remark = ''
  }
})
</script>
<style>
.seekone {
  background-color: #2b59dd;
  color: white;
}

.backgauge {
  padding: 20px 30px;
}

.newhr {
  margin-bottom: 30px;
}
</style>
